<template>
  <div
    class="DRoseChart"
    :id="ids"
    :chartType="chartType"
    :chartData="chartData"
    :legendData="legendData"
    :backgroundColor="backgroundColor"
    :style="{ height: height, width: width }"
    :titleText="titleText"
    :subtext="subtext"
    :textStyle="{ color: textStyle.color, fontSize: textStyle.fontSize }"
    :legendIsHide="legendIsHide"
    :legendSeat="{ x: legendSeat.x, y: legendSeat.y }"
    :emphasisIsHide="emphasisIsHide"
    :labelIsHide="labelIsHide"
    :radiusLength="radiusLength"
    :chartTitle="chartTitle"
    :seatCenter="seatCenter"
    :colorList="colorList"
  ></div>
</template>
<script>
export default {
  name: "DRoseChart",
  data () {
    return {
      ids: this.generatorOnlyId(),
      chartHeight: "500px",
      chartWidth: "1000px"
    }
  },
  props: {
    id: {
      type: String,
      default: ""
    },
    chartType: {
      type: String,
      default: "rose"
    },
    chartDataY: {
      type: [Array, Object],
      default () {
        return null;
      }
    },
    chartDataX: {
      type: Array,
      default () {
        return null
      }
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "260px"
    },
    backgroundColor: {
      type: String,
      default: ""
    },
    titleText: {
      type: String,
      default: ""
    },
    subtext: {
      type: String,
      default: ""
    },
    textStyle: {
      type: Object,
      default () {
        return {
          color: "#ffffff",
          fontSize: "18"
        }
      },
    },
    legendIsHide: {
      type: Boolean,
      default: false,
    },
    chartData: {
      type: Array,
      default: null
    },
    legendData: {
      type: Array,
      default: null
    },
    legendSeat: {
      type: Object,
      default () {
        return {
          x: '26%',
          y: '10%'
        }
      }
    },
    emphasisIsHide: {
      type: Boolean,
      default: true,
    },
    labelIsHide: {
      type: Boolean,
      default: true,
    },
    radiusLength: {
      type: Array,
      default () {
        return [20, 50]
      }
    },
    chartTitle: {
      type: String,
      default: ""
    },
    seatCenter: {
      type: Array,
      default () {
        return ['50%', '50%']
      }
    },
    colorList: {
      type: Array,
      default () {
        return ['#7eacea', '#e15777', '#95ea71', '#ea9b4f']
      }
    }
  },
  watch: {},
  // 1.先创建需要渲染盒子的宽高
  created () {
    this.generatorWithAndHeight();
  },
  // 2.再创建渲染图形
  mounted () {
    this.drawChart();
  },

  methods: {
    // 生成图表的唯一ID
    generatorOnlyId () {
      return (
        this.id +
        this.$moment().format("YYYYMMDDHHmmssSSS") +
        Math.floor(Math.random() * 10000)
      );
    },
    // 生成渲染图表div的宽度与高度
    generatorWithAndHeight () {
      this.chartWidth = `${this.width ? this.width : document.body.offsetWidth * 0.8}px`;
      this.chartHeight = `${this.height ? this.height : document.body.offsetHeight * 0.6}px`;
    },
    // 绘制图表
    drawChart () {
      let myChart = this.$echarts.init(document.getElementById(this.ids));
      // 判断初始化是否成功，如失败，则输出错误
      if (myChart === undefined || myChart === null || myChart === "") {
        console.error(`echarts init dom id ${this.id} failed`);
        return;
      }
      // 判断图表类型，根据图表类型渲染不同的图表
      switch (this.chartType) {
        case "rose":
          myChart.setOption(this.columnChartOption());
          break;
        default:
          console.error(`chartType ${this.chartType} is invalid`);
          break;
      }

      let self = this;
      let work = null;
      window.addEventListener("resize", function () {
        self.generatorWithAndHeight(); // self设置当前图形的高度
        if (work == null) {
          // 可视窗口大小改变的时候触发
          work = setTimeout(function () {
            myChart.resize();
            work = null;
          }, 100);
        }
      });
    },
    columnChartOption () {
      return {
        backgroundColor: this.backgroundColor,
        color: this.colorList,
        title: {
          text: this.titleText,
          subtext: this.subtext,
          left: "center",
          textStyle: {
            color: this.textStyle.color,
            fontSize: this.textStyle.fontSize,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: this.legendIsHide,
          x: this.legendSeat.x,
          y: this.legendSeat.y,
          data: this.legendData
        },
        series: [
          {
            name: this.chartTitle,
            type: 'pie',
            radius: this.radiusLength,
            center: this.seatCenter,
            roseType: 'radius',
            label: {
              show: this.labelIsHide
            },
            emphasis: {
              label: {
                show: this.emphasisIsHide
              }
            },
            data: this.chartData
          }
        ]

      };
    }
  }
}
</script>
<style lang="scss" scoped>
</style>